<script src="js/countrySelect/country_select_funs.js"></script>
<template>
  <div style="overflow:auto;max-height:700px;">
    <CheckboxGroup  v-model="countrySelect" @on-change="change">
      <i-col :span="6" v-for="(item,index) in countryList" >
        <div  class="country_div"  >
          <Checkbox :label="index" :value="index">&nbsp;</Checkbox>
          <img :src="yunPath+item.countryImg" />
          <div style="">
            <span>{{item.countryCn}}</span>
            <br>
            <span>{{item.countryEn}}</span>
          </div>
        </div>
      </i-col>
    </CheckboxGroup >
  </div>
</template>
<script>
  import tiyData from "./js/countrySelect/country_select_data.js"
  import {
  init
  } from  "./js/countrySelect/country_select_funs.js"

  export default {

    data(){
      return {
        tData:tiyData.tData,
        countrySelect:[],
        countryList:tiyData.tData.countryList,
        yunPath: this.$store.getters.imgPrefix
        //字典 性别
      }
    },
    methods: {
      change(countrySelect){
        if( this.countrySelect.length>0){

        }
          this.countrySelect.splice(0,this.countrySelect.length-1);
          let index = countrySelect[0];
          this.$emit("changeCountry", tiyData.tData.countryList[index]);
      },
      clear(){
        this.countrySelect.splice(0,this.countrySelect.length)
      }

    },
    components: {

    },

    mounted(){
     init(this,tiyData);
    }
  }
</script>

<style lang="less" scoped>
  .country_div{
    border: solid #f1f1f1 1px;
    height: 3rem;
    margin: 8px;
    padding: 8px;
    display: -webkit-flex; /* Safari */
    display: flex;
    cursor: pointer;
    align-items:center;
    font-size: 0.9em;

  img{
    width: 2rem;
    margin-right: 1rem
  }

  }



</style>
